<template>
	<view class="opAdd">
		<view class="part">
			<view class="line">
				<input type="text" v-model='receiver' placeholder="请输入姓名"/>
			</view>
			<view class="line">
				<input type="number" v-model='phone' placeholder="请输入手机号"/>
			</view>
			<view class="addContent dFlex jBetween_aCenter">
				<view class="content">
					<view class="line" @click="chooseLocate">
						<input type="text" v-model="address" disabled placeholder="请选择\定位当前地址"/>
					</view>
					<view class="line">
						<input type="text" v-model="address_detail" placeholder="详细地址"/>
					</view>
				</view>
				<view class="addIcon imgPublic dFlex jCenter_aCenter" @click="chooseLocate">
					<image src="../static/images/dwgl@2x.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="line dFlex jStart_aCenter" style="border:none">
				<switch color='#3E8EF0' @change="changeDefault" :checked='is_default?true:false' v-model="is_default" style="transform:scale(0.7)"/>
				<text>设为默认</text>
			</view>
		</view>
		<view class="part">
			<view class="partTit">智能填写</view>
			<view class="desc">
				<textarea auto-height v-model="addInfo" placeholder="粘贴收货信息到此处,将自动识别姓名/地址/电话"/>
			</view>
			<view class="tool dFlex jBetween_aCenter">
				<button v-show='!isShow' @touchstart="touchStart" @touchend="touchEnd" class="language dFlex jStart_aCenter">
					<view class="yuyinIcon imgPublic">
						<image src="../static/images/zntx@2x.png" mode="widthFix"></image>
					</view>
					<text>智能填写</text>
				</button>
				<view v-show='isShow' class="language dFlex jStart_aCenter">
					<view class="yuyinIcon imgPublic">
						<image src="../static/images/zntx@2x.png" mode="widthFix"></image>
					</view>
					<text>录音中...,请描述文字。</text>
				</view>
				<view class="mingxi" @click="pasts_and_identify">粘贴并识别</view>
			</view>
			<view class="sub" @click='saveAdd'>保 存</view>
		</view>
	</view>
</template>

<script>
	var plugin = requirePlugin("WechatSI");
	let manager = plugin.getRecordRecognitionManager();
	import amapFile from '@/tools/map.js';
	import {
		saveAddress
	} from '@/tools/http.js';
	import {AddressParse} from '@/uni_modules/addressParse/components/addressAutoParse/lib/addressParseBundle.js';
	export default {
		data() {
			return {
				myAmapFun:null,
				receiver:'',
				phone:'',
				address:'',
				address_detail:'',
				is_default:0,
				
				addInfo:'',//智能填写的地址
				id:'',
				voiceState:'',
				isShow:false,
			};
		},
		onLoad(e){
			console.log(e);
			this.initRecord();
			if(e.info){
				this.id = JSON.parse(e.info).id;
				this.receiver = JSON.parse(e.info).receiver;
				this.phone = JSON.parse(e.info).phone;
				this.address = JSON.parse(e.info).address;
				this.address_detail = JSON.parse(e.info).address_detail;
				this.is_default = JSON.parse(e.info).is_default;
			}
		},
		onShow(){
			this.initMap();
		},
		methods:{
			initMap(){
				this.myAmapFun = new amapFile.AMapWX({key:'3a644b891669346eef9e80ff6f058feb'});
			},
			touchStart(){
				// uni.showToast({
				// 		title: '正在录音',
				// 		icon: "none"
				// 	})
				this.isShow = true
				manager.start({
					duration: 60000,
					lang: "zh_CN"
				});
			},
			touchEnd(){
				// uni.showToast({
				// 		title: '录音完成',
				// 		icon: "none"
				// 	})
				this.isShow = false
				manager.stop();
			},
			cleanText(text) {
				const cleanedText = text.replace(/\/|收件人：|手机号码：|所在地区：|详细地址：/g, '');
				return cleanedText;
			},
			// 选择地址
			chooseLocate(){
				uni.chooseLocation({
					success:(locate)=>{
						if(locate.errMsg == 'chooseLocation:ok'){
							this.myAmapFun.getRegeo({
								location:`${locate.longitude},${locate.latitude}`,
								success:(data)=>{
									if(data.length > 0){
										this.address = data[0].regeocodeData.addressComponent.province + 
										data[0].regeocodeData.addressComponent.city + data[0].regeocodeData.addressComponent.district;
										this.address_detail = data[0].name;
									}
								},
								fail:(info)=>{
								  //失败回调
								  console.log(info)
								}
							})
						}else{
							this.address = '';
							this.address_detail = '';
							uni.showToast({
								title:locate.errMsg,
								icon:"none"
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			},
			// 修改默认
			changeDefault(event){
				this.is_default = event.detail.value ? 1 : 0;
			},
			// 保存收货地址
			async saveAdd(){
				let tips = '';
				if(!this.receiver){
					tips = '收件人姓名不能为空';
				}
				if(!this.phone){
					tips = '收件人手机号不能为空';
				}else{
					var reg=/^[1][3,4,5,7,8][0-9]{9}$/;
					if(!reg.test(this.phone)) {
						tips = '手机号格式不正确';
					}
				}
				if(!this.address){
					tips = '请选择地址';
				}
				if(!this.address_detail){
					tips = '请输入详细地址';
				}
				if(tips){
					uni.showToast({
						title:tips,
						icon:"none"
					})
					return
				}
				let res = await saveAddress({
					id:this.id ? this.id : '',
					receiver:this.receiver,
					phone:this.phone,
					address:this.address,
					address_detail:this.address_detail,
					is_default:this.is_default,
				});
				if(res){
					uni.showToast({
						title:'地址已保存',
						icon:"success"
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1650)
				}
			},
			// 粘贴并识别
			pasts_and_identify(){
				uni.getClipboardData({
					success: (addInfo) => {
						if(addInfo.errMsg == "getClipboardData:ok"){
							this.addInfo = addInfo.data;
							const result = AddressParse.parse(this.addInfo);
							this.address = result[0].province + result[0].city + result[0].area;
							this.address_detail = result[0].details;
							this.phone = result[0].mobile;
							this.receiver = result[0].name;
						}else{
							this.addInfo = '';
							this.address = '';
							this.address_detail = '';
						}
					},
					fail:(err)=>{
						uni.showToast({
							title:err.errMsg,
							icon:"none"
						})
					}
				})
			},
			/**  
			 * 初始化语音识别回调  
			 * 绑定语音播放开始事件  
			 */
			initRecord(){
				manager.onStart = function(res) {
					console.log('start',res.msg);
					this.voiceState = res.msg;
				};
				//有新的识别内容返回，则会调用此事件  
				manager.onRecognize = (res) => {
					this.voiceState = res.result;
					console.log('onRecognize');
				}
 
				// 识别结束事件  
				manager.onStop = (res) => {
					console.log(res);
					if(res.result){
						this.addInfo = res.result;
						const result = AddressParse.parse(this.addInfo);
						this.address = result[0].province + result[0].city + result[0].area;
						this.address_detail = result[0].details;
					}else{
						uni.showToast({
							title:"未能识别您的语音，请重新输入",
							icon:"none",
						})
					}
					this.voiceState = res.result;
					console.log('onStop',res.result);
				}
 
				// 识别错误事件  
				manager.onError = (res) => {
					console.log(res);
					this.addInfo = '';
					const result = AddressParse.parse(this.addInfo);
					this.address = '';
					this.address_detail = '';
					this.voiceState = res.msg;
					console.log('onError');
 
				}
			},
		}
	}
</script>

<style lang="scss">
	.opAdd{
		width:100%;
		padding:12px;
		box-sizing: border-box;
		.part{
			width:100%;
			padding:12px;
			box-sizing: border-box;
			background: white;
			border-radius: 5px;
			margin-bottom: 12px;
			.partTit{
				width:100%;
				font-weight: bold;
				padding:0 0 10px;
			}
			.desc{
				width:100%;
				border:1px solid #E6E6E6;
				border-radius: 5px;
				margin: 12px 0 8px;
				padding: 5px;
				box-sizing: border-box;
				textarea{
					width:100%;
					min-height: 80px;
					font-size:13px;
				}
			}
			.sub{
				width:100%;
				color:white;
				text-align: center;
				padding:8px 0;
				background: #F4F4F4 linear-gradient(180deg, #3E8EF0 0%, #1362C9 100%);
				border-radius: 50px;
				margin-bottom: 15px;
			}
			.tool{
				width:100%;
				margin-bottom: 20px;
				font-size: 12px;
				.language{
					.yuyinIcon{
						width:20px;
						height:20px;
						margin-right: 5px;
					}
				}
				.mingxi{
					color:#3E8EF0;
				}
			}
			.addContent{
				width:100%; 
				.content{
					flex:1;
				}
				.addIcon{
					border-left: 1px solid #e6e6e6;
					width: 80px;
					height:80px;
					image{
						width: 30px;
					}
				}
			}
			.line{
				width:100%;
				padding:10px 0;
				border-bottom: 1px solid #e6e6e6;
				text{
					display: inline-block;
					margin-left: 6px;
				}
				input{
					width: 100%;
				}
			}
		}
	}
</style>
